<template>
    <div>
        <ul>
            <li v-for="(item, index) in list" :key="index" @click="$router.push(`/detail/${item.name}`)">
                <p>{{item.name}}</p>
                <p>{{item.size}}平方米</p>
                <p>{{item.money}}元/月</p>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: [
                {
                    "name": "阳光公寓",
                    "size": 85,          // 单位：平方米
                    "money": 3000,       // 单位：人民币
                    "type": "现代简约"
                },
                {
                    "name": "温馨小屋",
                    "size": 50,
                    "money": 1800,
                    "type": "北欧风格"
                },
                {
                    "name": "豪华别墅",
                    "size": 200,
                    "money": 12000,
                    "type": "奢华欧式"
                },
                {
                    "name": "田园居",
                    "size": 70,
                    "money": 2500,
                    "type": "乡村风格"
                },
                {
                    "name": "时尚公馆",
                    "size": 100,
                    "money": 5000,
                    "type": "工业风格"
                }
            ]

        }
    }
}
</script>


<style scoped>
ul {
    list-style: none;
    margin-bottom: 60px;
    margin-top: 0;
}
ul li {
    width: 100%;
    border-bottom: 1px solid #ccc;
    padding: 10px ;
}

</style>